<template>
  <div class="header">
    <div class="header-left">
      <!-- 展开图标 -->
      <el-icon
        color="#000000"
        size="30"
        v-show="menuStore.menuBoo"
        @click="menuStore.changeMenuBoo"
        ><Expand
      /></el-icon>
      <!-- 折叠图标 -->
      <el-icon
        color="#000000"
        size="30"
        v-show="!menuStore.menuBoo"
        @click="menuStore.changeMenuBoo"
        ><Fold
      /></el-icon>
      <!-- 面包屑导航 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{ route.meta.title }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="header-right" v-if="loginStore.userInfo">
      <!-- 头像组件 -->
      <el-avatar :size="30" :src="circleUrl" />
      <!-- 下拉菜单组件 -->
      <el-dropdown>
        <span class="el-dropdown-link">
          {{ loginStore.userInfo.username }}
          <el-icon class="el-icon--right">
            <CaretBottom />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>个人信息</el-dropdown-item>
            <el-dropdown-item @click="clickOut">注销</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useMenuStore } from "@/stores/menuCollapse";
import { useRoute, useRouter } from "vue-router";
import { useLoginStore } from "@/stores/login";

const route = useRoute();
const router = useRouter()
const menuStore = useMenuStore();
const loginStore = useLoginStore()

const circleUrl = ref<string>(
  "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
);

// 点击注销
const clickOut = () => {
    // 清除pinia和缓存中的用户信息
    loginStore.changeUserInfo(null)
    localStorage.removeItem("userInfo")

    // 跳转登录页
    router.push("/login")
}

//图标状态默认为菜单展开
// const iconBoo = ref<boolean>(false)

//点击图标切换状态
//const clickIcon = ()=>{
// iconBoo.value = !iconBoo.value
//调用仓库中修改状态的方法
// menuStore.changeMenuBoo()
//}
</script>

<style lang="less" scoped>
.header {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .header-left {
    display: flex;
    align-items: center;
    .el-icon {
      margin-right: 30px;
    }
  }
  .header-right {
    display: flex;
    align-items: center;
    .el-avatar {
        margin-right: 20px;
    }
    .example-showcase {
      .el-dropdown-link {
        cursor: pointer;
        color: var(--el-color-primary);
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
